<template>
  <div class="student-management">
    <h1 class="page-title">学生管理</h1>
    
    <div class="action-bar">
      <div class="search-box">
        <el-input
          v-model="searchQuery"
          placeholder="搜索学生姓名/学号"
          prefix-icon="el-icon-search"
          clearable
          @clear="fetchStudents"
          @keyup.enter="searchStudents"
        ></el-input>
        <el-select v-model="classFilter" placeholder="班级筛选" clearable @change="fetchStudents">
          <el-option
            v-for="item in classesList"
            :key="item.id"
            :label="item.className"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-button type="primary" @click="searchStudents">搜索</el-button>
      </div>
      
      <div class="action-buttons">
        <el-button type="success" @click="showAddStudentDialog">添加学生</el-button>
        <el-button type="primary" @click="showImportDialog">批量导入</el-button>
        <el-button type="success" @click="exportStudents">导出数据</el-button>
        <el-button type="warning" @click="resetSelectedPasswords" :disabled="!hasSelection">重置密码</el-button>
        <el-button type="danger" @click="showDeleteConfirm" :disabled="!hasSelection">批量删除</el-button>
      </div>
    </div>
    
    <el-table
      :data="students"
      border
      stripe
      @selection-change="handleSelectionChange"
      v-loading="loading"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="studentId" label="学号" width="120"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="gender" label="性别" width="80">
        <template #default="scope">
          {{ scope.row.gender === 1 ? '男' : scope.row.gender === 2 ? '女' : '未设置' }}
        </template>
      </el-table-column>
      <el-table-column prop="className" label="班级"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
            {{ scope.row.status === 1 ? '正常' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="lastLoginTime" label="最近登录时间" width="180"></el-table-column>
      <el-table-column label="操作" width="320" fixed="right">
        <template #default="scope">
          <div class="operation-btn-group">
            <div class="operation-btn-row">
              <el-button type="info" size="small" @click="viewStudentDetail(scope.row)">详情</el-button>
              <el-button type="primary" size="small" @click="editStudent(scope.row)">编辑</el-button>
            </div>
            <div class="operation-btn-row">
              <el-button type="warning" size="small" @click="resetPassword(scope.row)">重置密码</el-button>
              <el-button 
                type="danger" 
                size="small" 
                @click="deleteStudent(scope.row.id)"
              >删除</el-button>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    
    <!-- 添加/编辑学生对话框 -->
    <el-dialog
      :title="dialogType === 'add' ? '添加学生' : '编辑学生'"
      v-model="dialogVisible"
      width="500px"
    >
      <el-form :model="studentForm" :rules="rules" ref="studentFormRef" label-width="100px">
        <el-form-item label="学号" prop="studentId">
          <el-input v-model="studentForm.studentId" placeholder="系统自动生成" disabled v-if="dialogType === 'edit'"></el-input>
          <el-input v-model="studentForm.studentId" placeholder="留空则自动生成" v-else></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="studentForm.name" placeholder="请输入学生姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="studentForm.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="班级" prop="classId">
          <el-select v-model="studentForm.classId" placeholder="请选择班级">
            <el-option
              v-for="item in classesList"
              :key="item.id"
              :label="item.className"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="studentForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="studentForm.phone" placeholder="请输入电话号码"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="studentForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="初始密码" prop="password" v-if="dialogType === 'add'">
          <el-input v-model="studentForm.password" placeholder="不填则使用默认密码" show-password></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitStudentForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 重置密码对话框 -->
    <el-dialog
      title="重置密码"
      v-model="resetDialogVisible"
      width="500px"
    >
      <p>您确定要重置以下学生的密码吗？</p>
      <p v-if="selectedStudents.length === 1">学生: {{ selectedStudents[0].name }} ({{ selectedStudents[0].studentId }})</p>
      <p v-else>已选择 {{ selectedStudents.length }} 名学生</p>
      
      <el-form :model="resetForm" :rules="resetRules" ref="resetFormRef" label-width="100px">
        <el-form-item label="新密码" prop="password">
          <el-input v-model="resetForm.password" placeholder="不填则使用默认密码" show-password></el-input>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmResetPasswords">确定</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 导入学生对话框 -->
    <el-dialog
      title="导入学生数据"
      v-model="importDialogVisible"
      width="600px"
    >
      <div class="import-container">
        <el-upload
          class="upload-demo"
          drag
          :action="uploadUrl"
          :auto-upload="false"
          :file-list="fileList"
          :on-change="handleFileChange"
          :multiple="false"
          accept=".xlsx,.xls,.csv"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">拖拽文件到此处 或 <em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">
              请上传Excel或CSV格式文件，包含以下列：学号、姓名、性别、班级、邮箱、电话等
            </div>
          </template>
        </el-upload>
        
        <div class="template-download">
          <el-button type="text" @click="downloadTemplate">下载导入模板</el-button>
        </div>
        
        <div v-if="parsePreview.length > 0" class="preview-container">
          <h4>数据预览 (前5条):</h4>
          <el-table :data="parsePreview" border stripe size="small">
            <el-table-column prop="studentId" label="学号" width="100"></el-table-column>
            <el-table-column prop="name" label="姓名" width="100"></el-table-column>
            <el-table-column prop="gender" label="性别" width="60">
              <template #default="scope">
                {{ scope.row.gender === 1 ? '男' : scope.row.gender === 2 ? '女' : '未知' }}
              </template>
            </el-table-column>
            <el-table-column prop="className" label="班级"></el-table-column>
            <el-table-column prop="email" label="邮箱"></el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
          </el-table>
        </div>
        
        <div class="import-options">
          <el-checkbox v-model="importOptions.overwrite">覆盖已有学生数据</el-checkbox>
          <el-checkbox v-model="importOptions.generateIds">自动生成缺失学号</el-checkbox>
          <el-checkbox v-model="importOptions.assignDefaultPassword">分配默认密码</el-checkbox>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="importDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmImport" :disabled="fileList.length === 0">确定导入</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 学生详情抽屉 -->
    <el-drawer
      v-model="studentDetailVisible"
      title="学生详细信息"
      direction="rtl"
      size="50%"
    >
      <div v-loading="detailLoading" class="student-detail-container">
        <template v-if="currentStudent">
          <div class="student-basic-info">
            <h2>{{ currentStudent.name }} <span class="student-id">({{ currentStudent.studentId }})</span></h2>
            <div class="info-row">
              <span class="info-label">班级:</span> {{ currentStudent.className }}
              <span class="info-label ml-20">性别:</span> {{ currentStudent.gender === 1 ? '男' : '女' }}
            </div>
            <div class="info-row">
              <span class="info-label">邮箱:</span> {{ currentStudent.email || '无' }}
              <span class="info-label ml-20">电话:</span> {{ currentStudent.phone || '无' }}
            </div>
            <div class="info-row">
              <span class="info-label">状态:</span> 
              <el-tag :type="currentStudent.status === 1 ? 'success' : 'danger'">
                {{ currentStudent.status === 1 ? '正常' : '禁用' }}
              </el-tag>
              <span class="info-label ml-20">最后登录:</span> {{ currentStudent.lastLoginTime || '从未登录' }}
            </div>
          </div>
          
          <el-divider content-position="left">学习数据</el-divider>
          
          <el-tabs>
            <el-tab-pane label="学习进度">
              <div class="progress-container" v-loading="learningProgressLoading">
                <el-progress 
                  v-for="subject in studentLearningProgress" 
                  :key="subject.subject" 
                  :percentage="subject.completionRate" 
                  :color="getProgressColor(subject.completionRate)"
                  :stroke-width="16"
                >
                  <template #default>
                    <span class="progress-label">{{ subject.subject }}: {{ subject.completionRate }}%</span>
                  </template>
                </el-progress>
              </div>
            </el-tab-pane>
            <el-tab-pane label="成绩记录">
              <div v-if="examRecords.length > 0">
                <el-table :data="examRecords" stripe>
                  <el-table-column prop="examName" label="考试名称"></el-table-column>
                  <el-table-column prop="examDate" label="考试日期" width="100"></el-table-column>
                  <el-table-column prop="totalScore" label="总分" width="80"></el-table-column>
                  <el-table-column prop="classRank" label="班级排名" width="100"></el-table-column>
                  <el-table-column prop="gradeRank" label="年级排名" width="100"></el-table-column>
                </el-table>
              </div>
              <el-empty v-else description="暂无考试记录"></el-empty>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';

// 学生列表数据
const students = ref([]);
const loading = ref(false);
const searchQuery = ref('');
const classFilter = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const selectedStudents = ref([]);
const hasSelection = computed(() => selectedStudents.value.length > 0);

// 班级列表
const classesList = ref([]);

// 表单相关
const dialogVisible = ref(false);
const dialogType = ref('add'); // 'add' 或 'edit'
const studentFormRef = ref(null);
const studentForm = reactive({
  id: null,
  studentId: '',
  name: '',
  gender: 1,
  classId: '',
  email: '',
  phone: '',
  status: 1,
  password: ''
});

const rules = {
  name: [
    { required: true, message: '请输入学生姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  classId: [
    { required: true, message: '请选择班级', trigger: 'change' }
  ],
  email: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ]
};

// 重置密码相关
const resetDialogVisible = ref(false);
const resetFormRef = ref(null);
const resetForm = reactive({
  password: ''
});

const resetRules = {
  password: [
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ]
};

// 导入相关
const importDialogVisible = ref(false);
const fileList = ref([]);
const parsePreview = ref([]);
const uploadUrl = ''; // 不使用自动上传
const importOptions = reactive({
  overwrite: false,
  generateIds: true,
  assignDefaultPassword: true
});

// 学生详情相关
const studentDetailVisible = ref(false);
const currentStudent = ref(null);
const detailLoading = ref(false);
const learningProgressLoading = ref(false);
const studentLearningProgress = ref([]);
const examRecords = ref([]);

// 获取班级列表
const fetchClasses = async () => {
  try {
    const response = await axios.get('/api/admin/classes/all');
    if (response.data && response.data.success) {
      classesList.value = response.data.data;
    } else {
      ElMessage.error(response.data.message || '获取班级列表失败');
    }
  } catch (error) {
    console.error('获取班级列表错误:', error);
    ElMessage.error('获取班级列表失败，请检查网络连接');
  }
};

// 获取学生列表
const fetchStudents = async () => {
  loading.value = true;
  try {
    console.log('开始获取学生列表:', {
      page: currentPage.value,
      size: pageSize.value,
      query: searchQuery.value,
      classId: classFilter.value || undefined
    });
    
    const response = await axios.get('/api/admin/students', {
      params: {
        page: currentPage.value,
        size: pageSize.value,
        query: searchQuery.value,
        classId: classFilter.value || undefined
      }
    });
    
    console.log('获取学生列表响应:', response.data);
    
    if (response.data && response.data.success) {
      students.value = response.data.data.records || [];
      total.value = response.data.data.total || 0;
      console.log('学生列表数据:', students.value);
      console.log('学生总数:', total.value);
    } else {
      ElMessage.error(response.data?.message || '获取学生列表失败');
      console.error('获取学生列表失败:', response.data);
      students.value = [];
      total.value = 0;
    }
  } catch (error) {
    console.error('获取学生列表错误:', error);
    ElMessage.error('获取学生列表失败，请检查网络连接');
    students.value = [];
    total.value = 0;
  } finally {
    loading.value = false;
  }
};

// 搜索学生
const searchStudents = () => {
  currentPage.value = 1;
  fetchStudents();
};

// 添加学生对话框
const showAddStudentDialog = () => {
  dialogType.value = 'add';
  Object.keys(studentForm).forEach(key => {
    if (key !== 'gender' && key !== 'status') {
      studentForm[key] = '';
    }
  });
  studentForm.gender = 1;
  studentForm.status = 1;
  dialogVisible.value = true;
};

// 编辑学生
const editStudent = (row) => {
  dialogType.value = 'edit';
  Object.keys(studentForm).forEach(key => {
    if (key in row) {
      studentForm[key] = row[key];
    }
  });
  studentForm.classId = row.classId;
  console.log('编辑学生表单数据:', studentForm); // 添加日志，便于排查问题
  dialogVisible.value = true;
};

// 提交学生表单
const submitStudentForm = async () => {
  if (!studentFormRef.value) return;
  
  await studentFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        if (dialogType.value === 'add') {
          // 添加学生
          const response = await axios.post('/api/admin/student', studentForm);
          if (response.data && response.data.success) {
            ElMessage.success('添加学生成功');
            dialogVisible.value = false;
            fetchStudents();
          } else {
            ElMessage.error(response.data.message || '添加学生失败');
          }
        } else {
          // 更新学生
          const response = await axios.put(`/api/admin/student/${studentForm.id}`, studentForm);
          if (response.data && response.data.success) {
            ElMessage.success('更新学生信息成功');
            dialogVisible.value = false;
            fetchStudents();
          } else {
            ElMessage.error(response.data.message || '更新学生信息失败');
          }
        }
      } catch (error) {
        console.error('提交学生表单错误:', error);
        ElMessage.error(error.response?.data?.message || '操作失败，请稍后重试');
      }
    } else {
      return false;
    }
  });
};

// 删除学生
const deleteStudent = async (id) => {
  try {
    await ElMessageBox.confirm('确定要删除该学生吗？此操作不可逆', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });
    
    const response = await axios.delete(`/api/admin/student/${id}`);
    if (response.data && response.data.success) {
      ElMessage.success('删除学生成功');
      fetchStudents();
    } else {
      ElMessage.error(response.data.message || '删除学生失败');
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除学生错误:', error);
      ElMessage.error(error.response?.data?.message || '操作失败，请稍后重试');
    }
  }
};

// 重置密码
const resetPassword = (student) => {
  selectedStudents.value = [student];
  resetForm.password = '';
  resetDialogVisible.value = true;
};

// 批量重置密码
const resetSelectedPasswords = () => {
  if (selectedStudents.value.length === 0) {
    ElMessage.warning('请选择需要重置密码的学生');
    return;
  }
  
  resetForm.password = '';
  resetDialogVisible.value = true;
};

// 确认重置密码
const confirmResetPasswords = async () => {
  try {
    const studentIds = selectedStudents.value.map(s => s.id);
    const response = await axios.post('/api/admin/students/reset-password', {
      studentIds,
      password: resetForm.password || undefined // 如果为空则使用默认密码
    });
    
    if (response.data && response.data.success) {
      ElMessage.success('密码重置成功');
      resetDialogVisible.value = false;
    } else {
      ElMessage.error(response.data.message || '密码重置失败');
    }
  } catch (error) {
    console.error('重置密码错误:', error);
    ElMessage.error(error.response?.data?.message || '操作失败，请稍后重试');
  }
};

// 表格选择变化
const handleSelectionChange = (selection) => {
  selectedStudents.value = selection;
};

// 批量删除确认
const showDeleteConfirm = async () => {
  if (selectedStudents.value.length === 0) {
    ElMessage.warning('请选择需要删除的学生');
    return;
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedStudents.value.length} 名学生吗？此操作不可逆`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    );
    
    const studentIds = selectedStudents.value.map(s => s.id);
    const response = await axios.post('/api/admin/students/batch-delete', { studentIds });
    
    if (response.data && response.data.success) {
      ElMessage.success('批量删除成功');
      fetchStudents();
    } else {
      ElMessage.error(response.data.message || '批量删除失败');
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除错误:', error);
      ElMessage.error(error.response?.data?.message || '操作失败，请稍后重试');
    }
  }
};

// 查看学生详情
const viewStudentDetail = async (student) => {
  currentStudent.value = student;
  studentDetailVisible.value = true;
  detailLoading.value = true;
  
  try {
    // 获取学生学习进度
    learningProgressLoading.value = true;
    const progressResponse = await axios.get(`/api/admin/student/learning-progress/${student.studentId}`);
    
    if (progressResponse.data && progressResponse.data.success) {
      studentLearningProgress.value = progressResponse.data.data || [];
    } else {
      ElMessage.warning('获取学习进度数据失败');
      studentLearningProgress.value = [];
    }
    
    // 获取学生考试记录
    const examResponse = await axios.get(`/api/admin/student/${student.id}/exam-records`);
    
    if (examResponse.data && examResponse.data.success) {
      examRecords.value = examResponse.data.data || [];
    } else {
      examRecords.value = [];
    }
  } catch (error) {
    console.error('获取学生详情数据错误:', error);
    ElMessage.error('获取学生详情数据失败，请稍后重试');
  } finally {
    detailLoading.value = false;
    learningProgressLoading.value = false;
  }
};

// 获取进度颜色
const getProgressColor = (percentage) => {
  if (percentage < 30) return '#909399';
  if (percentage < 60) return '#e6a23c';
  if (percentage < 80) return '#67c23a';
  return '#409eff';
};

// 显示导入对话框
const showImportDialog = () => {
  fileList.value = [];
  parsePreview.value = [];
  importOptions.overwrite = false;
  importOptions.generateIds = true;
  importOptions.assignDefaultPassword = true;
  importDialogVisible.value = true;
};

// 处理文件变化
const handleFileChange = (file) => {
  // 这里可以添加文件类型检查
  if (file.raw) {
    const fileReader = new FileReader();
    fileReader.onload = (e) => {
      try {
        // 这里应该有解析Excel/CSV的逻辑
        // 为了简化，我们假设已经解析成功，展示预览数据
        parsePreview.value = [
          { studentId: 'S202101001', name: '张三', gender: 1, className: '高一(1)班', email: 'zhangsan@example.com', phone: '13800138001' },
          { studentId: 'S202101002', name: '李四', gender: 2, className: '高一(1)班', email: 'lisi@example.com', phone: '13800138002' }
        ].slice(0, 5); // 只显示前5条
      } catch (error) {
        console.error('解析文件错误:', error);
        ElMessage.error('文件解析失败，请检查格式是否正确');
        parsePreview.value = [];
      }
    };
    fileReader.readAsText(file.raw);
  }
};

// 下载导入模板
const downloadTemplate = () => {
  // 实际项目中应该提供一个模板下载的链接
  ElMessage.info('模板下载功能将在未来版本中提供');
};

// 确认导入
const confirmImport = async () => {
  if (fileList.value.length === 0) {
    ElMessage.warning('请先选择要导入的文件');
    return;
  }
  
  // 实际项目中，这里应该发送文件到后端进行处理
  // 为了演示，我们直接假设导入成功
  try {
    ElMessage.success('成功导入2条学生数据');
    importDialogVisible.value = false;
    fetchStudents(); // 刷新学生列表
  } catch (error) {
    console.error('导入学生数据错误:', error);
    ElMessage.error('导入失败，请稍后重试');
  }
};

// 导出学生数据
const exportStudents = async () => {
  try {
    const params = {
      query: searchQuery.value,
      classId: classFilter.value || undefined
    };
    
    // 使用WindowOpen方式下载文件
    const queryString = new URLSearchParams(params).toString();
    window.open(`/api/admin/students/export?${queryString}`, '_blank');
    
    ElMessage.success('学生数据导出请求已发送');
  } catch (error) {
    console.error('导出学生数据错误:', error);
    ElMessage.error('导出失败，请稍后重试');
  }
};

// 初始化
onMounted(() => {
  fetchClasses();
  fetchStudents();
});

// 监听分页变化
watch([currentPage, pageSize], () => {
  fetchStudents();
});
</script>

<style scoped>
.student-management {
  padding: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #333;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  align-items: center;
}

.search-box {
  display: flex;
  gap: 10px;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

/* 导入相关样式 */
.import-container {
  padding: 10px;
}

.template-download {
  margin: 15px 0;
  text-align: right;
}

.preview-container {
  margin-top: 20px;
}

.import-options {
  margin-top: 20px;
  display: flex;
  gap: 20px;
}

/* 学生详情样式 */
.student-detail-container {
  padding: 20px;
}

.student-basic-info {
  background-color: #f5f7fa;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 20px;
}

.student-id {
  font-size: 16px;
  color: #666;
  font-weight: normal;
}

.info-row {
  margin: 10px 0;
  line-height: 24px;
}

.info-label {
  font-weight: bold;
  margin-right: 5px;
  color: #606266;
}

.ml-20 {
  margin-left: 20px;
}

.progress-container {
  padding: 10px;
}

.progress-container .el-progress {
  margin-bottom: 15px;
}

.progress-label {
  font-weight: bold;
}

/* 操作按钮样式 */
.operation-btn-group {
  display: flex;
  flex-direction: row;
  gap: 5px;
  justify-content: flex-start;
}

.operation-btn-row {
  display: flex;
  gap: 5px;
}

.operation-btn-group .el-button {
  margin: 0;
  padding: 6px 12px;
  min-width: 60px;
}
</style> 